function Page(classname, obj={}){
    // 将html中提前准备好的大盒子获取到 - 作为对象的属性
    this.box = document.querySelector('.'+classname);
    // 为了更好的控制分页的样式 - 需要自己创建一个大div用来放分页
    this.container = document.createElement('div')
    // container中不允许选中文字
    this.container.onselectstart = ()=>false
    this.container.onmouseover = ()=>this.container.style.cursor = 'pointer';
    // 给container设置样式
    this.setStyle(this.container,{
        display:"flex",
        justifyContent:"center",
        alignItems:"center"
    })
    // 将自己创建好的分页容器放在大盒子中
    this.box.appendChild(this.container)
    // 处理参数
    // 将传入的obj参数作为对象的属性
    this.obj = obj
    // 给对象添加一个属性 - 代表中间放页码的那个div
    this.pageList = '';
    // 定义当前页默认为1
    this.currentPage = 1
    // 参数obj要做成可选项 - 其中的两个键值对都是可选项
    // 如果new的obj就没有传进来 - 需要有默认的值给用户做演示效果
    // 定义默认值
    this.default = {
        showTextObj:{
            first:'首页',
            prev:'上一页',
            list:'',
            next:'下一页',
            last:'尾页'
        },
        pageData:{
            total:1000,
            pageSize:10
        }
    }
    this.setParams()
    // 定义一个属性 - 用来接收传进来的obj中的函数
    this.show = obj.show || function(){}
    // 定义总页数
    this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
    // 创建5个div
    // 根据default中的showTextObj来创建
    this.createDiv()
    // 创建页码放到中间div中
    this.createPage()
    // 点击动起来
    this.click()
    // 禁用项的设置
    this.setDisabled()
    // 添加文本框和按钮的方法
    this.form()

    this.show(this.currentPage)
}
// 添加文本框和按钮的方法
Page.prototype.form = function(){
    // 创建文本框和按钮放在container里面
    var input = document.createElement('input')
    input.setAttribute('type','number')
    this.container.appendChild(input)
    this.setStyle(input,{
        height: '27px',
        width: '50px',
        'padding-left': '6px',
        outline: 'none',
        margin: '5px',
    })
    var btn = document.createElement('button')
    btn.innerText = 'GO';
    this.container.appendChild(btn)
    this.setStyle(btn,{
        height: '33px',
        margin: '5px',
        outline: 'none',
        'background-color': 'skyblue',
        border: 'none',
    })
}
// 设置禁用项的方法
Page.prototype.setDisabled = function(){
    // 如果当前页是1 - 首页和上一页就不能用了
    if(this.currentPage === 1){
        // 首页和上一页就不能用了
        this.container.children[0].setAttribute('disabled',true)
        this.container.children[1].setAttribute('disabled',true)

        this.container.children[0].style.backgroundColor = '#ccc';
        this.container.children[1].style.backgroundColor = '#ccc';
    }else{
        this.container.children[0].removeAttribute('disabled')
        this.container.children[1].removeAttribute('disabled')

        this.container.children[0].style.backgroundColor = 'transparent';
        this.container.children[1].style.backgroundColor = 'transparent';
    }
    // 如果当前页是尾页
    if(this.currentPage === this.totalPage){
        // 首页和上一页就不能用了
        this.container.children[3].setAttribute('disabled',true)
        this.container.children[4].setAttribute('disabled',true)

        this.container.children[3].style.backgroundColor = '#ccc';
        this.container.children[4].style.backgroundColor = '#ccc';
    }else{
        this.container.children[3].removeAttribute('disabled')
        this.container.children[4].removeAttribute('disabled')

        this.container.children[3].style.backgroundColor = 'transparent';
        this.container.children[4].style.backgroundColor = 'transparent';
    }
}
// 点击动起来的方法
Page.prototype.click = function(){
    // 利用事件委托 - 给container绑定事件，处理所有需要点击的子元素的事件
    this.container.onclick = ()=>{
        var e = window.event;
        var target = e.target || e.srcElement;
        // 判断具体的目标元素是否是尾页 - 根据类名
        if(target.className === 'last' && target.getAttribute('disabled') !== 'true'){
            this.currentPage = this.totalPage;
            this.createPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
        // 下一页
        else if(target.className === 'next' && target.getAttribute('disabled') !== 'true'){
            this.currentPage++
            this.createPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
        // 上一页
        else if(target.className === 'prev' && target.getAttribute('disabled') !== 'true'){
            this.currentPage--;
            this.createPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
        // 首页
        else if(target.className === 'first' && target.getAttribute('disabled') !== 'true'){
            this.currentPage = 1
            this.createPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
        // 页码点击
        else if(target.tagName === 'P' && +target.innerText !== this.currentPage){
            this.currentPage = +target.innerText
            this.createPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
        // 按钮的点击
        else if(target.tagName === 'BUTTON' && +target.previousElementSibling.value !== this.currentPage){
            if(target.previousElementSibling.value<1){
                target.previousElementSibling.value=1
            }else if(target.previousElementSibling.value>this.totalPage){
                target.previousElementSibling.value=this.totalPage
            }
            this.currentPage = +target.previousElementSibling.value
            this.createPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
    }
}
// 创建页码的方法
Page.prototype.createPage = function(){
    // 将div清空
    // console.log(this.pageList)
    this.pageList.innerHTML = '';
    // 根据总页数创建
    // 总页数<=5
    if(this.totalPage<=5){
        // 循环创建页码
        this.createP(1, this.totalPage)
    }
    // 总页数大于5
    else{
        // 当前页是前2页
        if(this.currentPage<=2){
            // 1~5
            this.createP(1, 5)
        }
        // 当前页是后2页
        else if(this.currentPage>=this.totalPage-1){
            // 最后5页 - 总页数-4~总页数
            this.createP(this.totalPage-4, this.totalPage)
        }
        // 当前页是中间页
        else{
            // 当前页-2~当前页+2
            this.createP(this.currentPage-2, this.currentPage+2)
        }
    }
}
// 根据初始值和结束值创建p标签的方法
Page.prototype.createP = function(start, end){
    for(var i=start;i<=end;i++){
        var p = document.createElement('p')
        p.innerText = i;
        this.pageList.appendChild(p)
        this.setStyle(p,{
            margin:"5px",
            padding:"5px",
            border:"1px solid #000"
        })
        // 设置当前页样式
        if(this.currentPage === i){
            p.style.backgroundColor = '#aaa';
            p.style.color = '#fff';
        }
    }
}
// 创建div的方法
Page.prototype.createDiv = function(){
    // 根据default的showTextObj
    for(var attr in this.default.showTextObj){
        var div = document.createElement('div')
        div.className = attr;
        div.innerText = this.default.showTextObj[attr]
        this.container.appendChild(div)
        if(attr !== 'list'){
            // 设置样式
            this.setStyle(div,{
                margin:"5px",
                padding:"5px",
                border:"1px solid #000"
            })
        }else{
            // 将创建好的放页码的div赋值给pageList这个属性
            this.pageList = div;
            this.setStyle(div,{
                display:"flex",
                justifyContent:"center",
                alignItems:"center"
            })
        }
    }
}
// 处理参数的方法
Page.prototype.setParams = function(){
    // 处理的是：new的时候传了，就用传进来的obj，如果没有传，就用定义好的默认值
    // 将传进来的内容给default做一个替换
    // 传了就替换，没有传就不替换
    for(var attr in this.obj.showTextObj){ // 如果传了，遍历能正常进行 - 替换。如果没有传。语法是不遍历空数据的 - 没有执行替换操作
        // 替换
        this.default.showTextObj[attr] = this.obj.showTextObj[attr]
    }

    for(var attr in this.obj.pageData){ // 如果传了，遍历能正常进行 - 替换。如果没有传。语法是不遍历空数据的 - 没有执行替换操作
        // 替换
        this.default.pageData[attr] = this.obj.pageData[attr]
    }
}
// 设置样式的方法
Page.prototype.setStyle = function(ele, styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}
/******************************* 调用模板 ********************************/
/*
new Page('pagination',{
    showTextObj:{
        first:'',
        prev:'',
        next:'',
        last:'',
    },
    pageData:{
        total:arr.length,
        pageSize
    },
    show:function(currentPage){
       var brr = arr.slice((currentPage-1)*pageSize, currentPage*pageSize)
       // 显示页面中
       var str = '';
       brr.forEach(v=>{
           str += `
               <tr>
                   <td>${v.id}</td>
                   <td>${v.name}</td>
                   <td>${v.sex}</td>
                   <td>${v.age}</td>
                   <td>删除</td>
               </tr>
           `
       })
       document.querySelector('tbody').innerHTML = str;
   }
})
*/